JavaScript模块化

JavasScript模块发展历史

在ES2015(ES6 )之前,ECMAScript(俗称JavaScript)没有标准的模块,从最初对JavaScript的设计预期来说,也不是要做多少事情的,比如就做做表单校验以解决当时网速超级慢的情况下客户端与服务端交互等待时间太长的问题,谁知道后来Web技术的发展让JavaScript肩上的责任越来越重大,预期也越来越高。

全局变量

早期不做任何管理的情况下,多个不同的JS的内容都通过script标签引用,不同js文件中的内容挂放在全局对象window的属性上,这样问题很明显,不同的js文件(可能是不同人写的)中有相同变量名的话,后面加载的会覆盖前面加载的,可能出现同名不同功能的函数被覆盖导致功能异常,这个前两年在维护老系统的时候还遇到过,同名的表单校验函数被各种CopyAndPaste到很多地方,然后有的地方需要这个规则,有的地方需要那个规则,然后你懂的,操碎了心心!!于是就有了下面的命名空间的事。

命名空间

最早接触到命名空间来解决类似的问题是在yuiextjs 中,在我们经常玩的MathType Web 中也还能看到类似的身影com.wiris.js.xxx 对于从Java转过来的小伙伴一点也不会陌生,这不就是那个包名么,而且早期也没有啥前端工程师,基本都是Web开发,也就是说前端也是后端写的,这样看来就不足为奇了。在前端内容越来越多、前端技术逐渐细分的情况下,原有Web开发也存在搞不定的事了(我碰到过一个JavaWeb哥们,调一个Table样式搞了一天尝试了N多方法,恁是没搞出来,然后我们的前端小姐姐出马分分钟搞定),这也就是专业的人干专业的事,才有了下面的事情。下面这些我们都称之为规范,但规范也分级别,这些都是社区规范或者说是民间规范,但比起前面这种命名约定来说,已经有了大幅度的发展了。

AMD + CMD + KMD + UMD

JavaScript模块标准化

详情见【JavaScript模块标准化】

CommonJS

参考wiki这里说标准也不那么恰当,但在Node.js环境中,比起前面的各种MD来说,又更近了一步,更加统一,以至于体验上会更加规范,但还不是规范,至少可以做到只要是Node,都遵守一致的模块定义,所有使用者也能达成共识。

ECMAScript

伴随着ES2015(ES6)的发布,JavaScript标准憋了十年的大招放出来,总算解决了模块标准化的问题,区别于以往任何的模块化系统,又是一套全新的规则,但标准总归是标准,各大平台相继支持Node,Deno等等

CSS 模块化

CSS-in-JS

CSS Modules

BEM

:global() :local()

样式组合

样式覆盖

  • 全局穿透样式
  • data属性来选择

HTML模块化

相关文档

模块化包管理工具

corepack

  • NodeJS 官方的包管理工具的管理工具

pnpm

yarn

cnpm

npm

bower

component

spm

模块化构建工具

vite

rollup

ykit——去哪儿网

webpack

fastpack

parcel

fis——百度

feflow——腾讯

fekit——去哪儿网

WeFlow——腾讯

coolie

老牌通用自动化工具

JavaScript转义器

在ES6发布前后,出现了一大堆相关的JavaScript转义器,主要解决新特性和兼容性问题,甚至也有Google的工具在其中,但最后因为各种各样的原因类似于更新不及时,支持不及时等等,最后babel 胜出,才有了现在的情况。

JavaScript预处理+类型增强

最后更新: 2022年03月02日 03:32

原始链接: http://rawbin-.github.io/modules/2018-12-11-fe-js-css-html-modules/

× 赞赏这个人~
打赏二维码